<template>
    <div id="profile">
        <div class="profile-body" v-if="userInfo">
            <div class="profile-preview">
                <div class="preview-head">
                    <el-image :src="userInfo.avatar_url" />
                </div>
                <div class="preview-name">{{userInfo.name}}</div>
                <div class="preview-remark">{{userInfo.bio}}</div>
                <div class="preview-reg">Join Gitee at {{helper.friendlyTime(userInfo.created_at)}}</div>
                <div class="preview-info">
                    <div class="preview-info-item">
                        <div class="preview-info-value">{{userInfo.followers}}</div>
                        <div class="preview-info-key">Fans</div>
                    </div>
                    <div class="preview-info-item">
                        <div class="preview-info-value">{{userInfo.following}}</div>
                        <div class="preview-info-key">Follow</div>
                    </div>
                    <!-- <div class="preview-info-item">
                        <div class="preview-info-value">{{userInfo.public_repos}}</div>
                        <div class="preview-info-key">Project</div>
                    </div> -->
                    <div class="preview-info-item">
                        <div class="preview-info-value">{{userInfo.stared}}</div>
                        <div class="preview-info-key">Star</div>
                    </div>
                    <div class="preview-info-item">
                        <div class="preview-info-value">{{userInfo.watched}}</div>
                        <div class="preview-info-key">Watch</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import request from "@/lib/request";
    import helper from "@/lib/helper";
    export
        default {
            data() {
                return {
                    isLoading: false,
                    userInfo: {
                        avatar_url: require('@/assets/img/logo.png')
                    },
                };
            },
            created() {
                this.userInfo = helper.getUserInfo();
            },
            methods: {
            }
        }
</script>
<style>
    #profile .profile-body {
        background-color: white;
        display: flex;
        flex-direction: row;
        border-radius: 20px;
        overflow: hidden;
        padding: 10px;
        margin-top: 20px;
    }

    .profile-preview {
        width: 100%;
        text-align: center;
    }

    .profile-preview .preview-head {
        text-align: center;
    }

    .profile-preview .preview-head .el-image {
        overflow: hidden;
        border-radius: 100%;
        overflow: hidden;
        border: 5px solid #eee;
    }

    .profile-preview .preview-head img {
        width: 160px;
        height: 160px;
    }

    .profile-preview .preview-name {
        font-size: 20px;
        color: #333;
        font-weight: bold;
        margin-top: 20px;
        margin-bottom: 10px;
    }

    .profile-preview .preview-remark,
    .profile-preview .preview-reg {
        font-size: 14px;
        margin-top: 5px;
        color: #999;
    }

    .profile-preview .preview-info {
        display: flex;
        flex-direction: row;
        text-align: center;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
    }

    .profile-preview .preview-info-item {
        text-align: center;
        padding: 10px 15px;
    }

    .profile-preview .preview-info-key {
        font-size: 14px;
        line-height: 24px;
        color: #999;
    }

    .profile-preview .preview-info-value {
        font-size: 20px;
        color: #666;
    }

    .profile-form {
        flex-grow: 1;
    }

    .profile-form-title {
        font-size: 20px;
        padding: 10px 10px 40px 10px;
        color: #333;
    }
</style>